<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>404 页面未找到</title>
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <!-- Font Awesome 图标 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .error-wrapper {
            height: 100vh;
            display: flex;
            align-items: center;
        }

        .error-code {
            font-size: 10rem;
            line-height: 1;
            text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
        }

        .bounce {
            animation: bounce 1.5s ease infinite;
        }

        @keyframes bounce {

            0%,
            20%,
            50%,
            80%,
            100% {
                transform: translateY(0);
            }

            40% {
                transform: translateY(-30px);
            }

            60% {
                transform: translateY(-15px);
            }
        }

        @media (max-width: 768px) {
            .error-code {
                font-size: 6rem;
            }
        }
    </style>
</head>

<body class="bg-light">
<div class="container">
    <div class="error-wrapper">
        <div class="text-center w-100">
            <!-- 动态错误码 -->
            <div class="error-code text-primary bounce mb-3">404</div>

            <!-- 提示信息 -->
            <h2 class="mb-3">哎呀！页面走丢了</h2>
            <p class="lead text-secondary mb-4">您访问的页面可能已被移除、暂时不可用或地址有误</p>

            <!-- 操作按钮 -->
            <div class="d-flex justify-content-center">
                <a class="btn btn-primary btn-lg mr-3" href="/login.html">
                    <i class="fa fa-home"></i>
                    返回首页
                </a>
            </div>

            <!-- 附加内容 -->
            <div class="mt-5">
                <p class="text-muted small">
                    需要帮助？请联系
                <div class="text-primary">技术支持</div>
                <!-- <a href="mailto:support@example.com" class="text-decoration-none">
                    <i class="fa fa-envelope"></i>
                    技术支持
                </a> -->
                </p>
            </div>
        </div>
    </div>
</div>
</body>

</html>